<template>
    <es-gesture @swiperight="back">
        <es-loading :isOpen='isLoading'  spinner="spinner04">
            <es-gesture :swiperight="back">
                <es-scroll :style="{height:scrollHeight}" height="1000px">
                    <es-card class="card deepPurple" :style="{width:cardWidth}" :onRevealTrigger="triggerChart1">
                        <div slot="title">实时负荷</div>
                        <div slot="content">
                            <p class="num">33MW</p>
                        </div>
                        <div slot="action">
                            <mu-raised-button label="平均值" />
                            <mu-raised-button label="最大值" />
                        </div>
                        <div slot="reveal" class="reveal">
                            <es-chart :options="options1" :isInit="chart1Init" :delayLoad="1500"></es-chart>
                        </div>
                    </es-card>
                    <es-card class="card deepPurple" :style="{width:cardWidth}" :onRevealTrigger="triggerChart1">
                        <div slot="title">实时负荷</div>
                        <div slot="content">
                            <p class="num">33MW</p>
                        </div>
                        <div slot="action">
                            <mu-raised-button label="平均值" />
                            <mu-raised-button label="最大值" />
                        </div>
                        <div slot="reveal" class="reveal">
                            <es-chart :options="options1" :isInit="chart1Init" :delayLoad="1500"></es-chart>
                        </div>
                    </es-card>
                </es-scroll>
            </es-gesture>
        </es-loading>
    </es-gesture>
</template>

<script>
    export default {
        data() {
            return {
                cardWidth: ($screen.width - 24 + 'px'),
                scrollHeight: $screen.height + 'px',
                isLoading: false,
                chart1Init: false,
                options1: {
                    title: {
                        text: 'Vue---ECharts'
                    },
                    tooltip: {},
                    xAxis: {
                        data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
                    },
                    yAxis: {},
                    series: [{
                        name: '销量',
                        type: 'bar',
                        data: [5, 20, 36, 10, 10, 20]
                    }]
                }
            }
        },
        methods: {
            back: function() {
                this.$router.go(-1)
            },
            triggerChart1: function(e) {
                if (e) {
                    //this.startLoading();
                    this.chart1Init = true;
                }
            },
            startLoading: function(e) {
                this.isLoading = true;
                setTimeout(()=>{this.isLoading=false},3000)

            },
            handle: function() {
                this.isLoading = false;
            }
        },
        beforeDestroy() {
        },
        mounted() {
            this.startLoading();
        }
    }
</script>

<style scoped>
    .num {
        font-size: 36px;
        padding-left: 48px;
        color: white;
    }
    .reveal {
        width: 100%;
        height: 100%;
    }
    .card {
        color: white;
        margin-left: 12px;
        margin-right: 12px;
        margin-top: 6px;
        margin-bottom: 6px;
        float: left;
    }
    .default {
        background-color: #23EE1F;
    }
    .deepPurple {
        background-color: #673ab7;
    }
    .blue {
        background-color: #2196f3;
    }
    .teal {
        background-color: #009688;
    }
</style>

